.listHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--size__500) var(--size__200);
  padding-left: var(--size__300);
}

.listHeaderPrimary {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-right: var(--size__200);
  color: var(--color__black--650);

  .isActive & {
    color: var(--color__blue--600);
  }

  .isCompleted & {
    color: var(--color__green--600);
  }

  .isError & {
    color: var(--color__red--600);
  }
}

.headerButton {
  margin-right: var(--size__100);

  &:last-child {
    margin-right: 0;
  }
}

.listHeaderSecondary {
  flex-shrink: 0;
  flex-wrap: nowrap;
}

.derivedStatus {
  display: block;
  font-size: var(--text__normal);
  font-weight: 600;
}

.derivedStatusIcon {
  flex-shrink: 0;
  margin-right: var(--size__100);
  font-size: var(--text__normal);

  &.spinner {
    animation: spinnerRotate 2s linear infinite;
  }
}

.humanizedStatus {
  margin-left: var(--size__200);
  color: var(--color__black--700);
  font-size: var(--text__smaller);
  font-weight: 500;
  text-align: left;
}

.statusInformationIcon {
  position: relative;
  top: 0.1rem;
  margin-right: var(--size__100);
  color: var(--color__black--600);
}

@keyframes spinnerRotate {
  from {
    transform:rotate(0deg);
  }

  to {
    transform:rotate(360deg);
  }
}
